<template>
  <div id="Deatilcommentinfo" v-if="Object.keys(detailInfo).length !== 0">
       <div class="desc">
               {{detailInfo.desc}}
       </div>
       <div class="info-key">{{detailInfo.detailImage[0].key}}</div>
       <div class="info-list" v-for="(item,index) in detailInfo.detailImage[0].list" :key="index">
             <img :src="item" alt="" @load="imageLoad">
       </div>
  </div>
</template>
<script>
export default {
  name: 'Deatilcommentinfo',
  props:{
    detailInfo:{
       type: Object,
       default(){
          return {}
       }
    }
  },
  components: { },
  directives: { },
  data() {
    return {
       count:0,
       imageLength:0
    };
  },
  mounted() {
    
  },
  methods: {
    imageLoad(){
       if(++this.count===this.imageLength){
           this.$emit('imageLoad')
       }
    }
  },
  watch: {
     detailInfo(){
       this.imageLength= this.detailInfo.detailImage[0].list.length
     }
  },
};
</script>
<style  scoped>
  .desc,.info-key{
    font-size: 16px;
    padding:0 10px;
    text-align: justify;
    line-height: 20px;
  }
  .info-key{
     margin:10px 0 ;
  }
  .info-list{
    width:100%;
    padding:0 10px;
  }
   .info-list img{
     display: block;
     margin:5px auto;
     width: 100%;
     height: auto;
   }
</style>